<!DOCTYPE HTML>
<html>
	<head>
		<title>All Cameras</title>
	</head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	var camDefs = %ALLCAMS_IDS_NAMES_JS_ARRAY%;
	var remoteIp = "%REMOTEIP%";
	var allowedCams = [];
	var disallowedCams = [];
	var noRefreshCams = [];
	var refreshDisabled = false;
	var refreshTime = 2500;
	$(function()
	{
		FilterCamDefs();
		var isLocal = remoteIp.indexOf("192.168.0.") > -1;
		if(isLocal)
			setTimeout("disableRefresh()", 300000);
		for(var i = 0; i < camDefs.length; i++)
		{
			var myid = camDefs[i][0];
			$("#maindiv").append('<div class="outer"><a href="image/' + myid + '.cam"><table><tbody><tr><td class="imgbox"><img id="' + myid + '" alt="' + camDefs[i][1] + '"></td></tr></tbody></table><div class="caption">' + camDefs[i][1] + '</div></a></div>');
			if(isLocal)
				refreshTime = 250;
			if($.inArray(myid, noRefreshCams) < 0)
			{
				$("#" + myid).load(function ()
				{
					if(!refreshDisabled)
					{
						lastUpdate = new Date().getTime();
						setTimeout("GetNewImage('" + this.id + "');", refreshTime);
					}
				});
			}
			$("#" + myid).error(function ()
			{
				setTimeout("GetNewImage('" + this.id + "');", refreshTime);
			});
			GetNewImage(myid);
		}
	});
	function FilterCamDefs()
	{
		var newCamDefs = new Array();
		if(allowedCams.length > 0)
		{
			for(var i = 0; i < camDefs.length; i++)
				if($.inArray(camDefs[i][0], allowedCams) >= 0)
					newCamDefs.push(camDefs[i]);
			camDefs = newCamDefs;
		}
		else if(disallowedCams.length > 0)
		{
			for(var i = 0; i < camDefs.length; i++)
				if($.inArray(camDefs[i][0], disallowedCams) < 0)
					newCamDefs.push(camDefs[i]);
			camDefs = newCamDefs;
		}
	}	
	function GetNewImage(id)
	{
		$("#" + id).attr('src', 'image/' + id + '.jpg?maxwidth=320&maxheight=240&nocache=' + new Date().getTime());
	}
	function disableRefresh()
	{
		$("#maindiv").prepend('<div style="color: Red;">Camera Updating Stopped to conserve resources</div>');
		refreshDisabled = true;
	}
	function PopupMessage(msg)
	{
		var pm = $("#popupMessage");
		if(pm.length < 1)
			$("#maindiv").after('<div id="popupFrame"><div id="popupMessage">' + msg + '</div><center><input type="button" value="Close Message" onclick="CloseMessage()"/></center></div>');
		else
			pm.append(msg);
	}
	function CloseMessage()
	{
		$("#popupFrame").remove();
	}
	</script>
	<style type="text/css">
	img
	{
		max-width: 320px;
		max-height: 240px;
		vertical-align: middle;
	}
	.caption
	{
		text-align: center;
	}
	a
	{
		text-decoration: none;
		color: Black;
	}
	.imgbox
	{
		width: 320px;
		height: 240px;
	}
	.outer
	{
		display: inline-block;
		padding-right: 20px;
		padding-bottom: 20px;
	}
	</style>
<body>
	<div id="maindiv"></div>
</body>
</html>